<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			////要求，定义个公共的方法，能够实现只需要接收要互换的两个节点，
			//然后调用这个方法，节点实现互换
			 function SwitchingNoed(Node1,Node2){
			 	if(!(Node1.parentNode&&Node2.parentNode)){
			 		alert("交换失败");
			 		return;
			 	}
				var Node1P = Node1.parentNode;
				var Node2P = Node2.parentNode;
				var clone1 = Node1.cloneNode(true);
				var clone2 = Node2.cloneNode(true);
				Node1P.replaceChild(clone2,Node1);
				Node2P.replaceChild(clone1,Node2);
			}
			window.onload=function(){
				var bjNode=document.getElementById("bj");
				var riNode=document.getElementById("rl");
				var a=5;
				var buttonNode=document.getElementById("button");
				buttonNode.onclick=function(){
					SwitchingNoed(bjNode,riNode);
				}
				
			}
		</script>
	</head>
	<body>
		
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
			
		</ul> 
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
			
		</ul>
		
		<br />
		<button id="button">点我交换</button>
	</body>
</html>
